<template>
  <div>
    <div class="swiperBox">
        <Swiper></Swiper>
    </div>
    <div class="sellWell clear bodycontent">
      <div class="sellWellList"><img src="../assets/img/banner-1.png" alt=""></div>
      <div class="sellWellList"><img src="../assets/img/banner-1.png" alt=""></div>
      <div class="sellWellList"><img src="../assets/img/banner-1.png" alt=""></div>
      <div class="sellWellList"><img src="../assets/img/banner-1.png" alt=""></div>
    </div>
    <div class="goodsBox bodycontent">
      <div class="goodesTitleBox">
        <GoodsTitle></GoodsTitle>
      </div>
      <GoodsSwiper></GoodsSwiper>
    </div>
    <div class="goodsBox bodycontent">
      <div class="goodesTitleBox">
        <GoodsTitle></GoodsTitle>
      </div>
      <div class="goodsListBox clear">
        <div class="goodsList"><GoodsList></GoodsList></div>
        <div class="goodsList"><GoodsList></GoodsList></div>
        <div class="goodsList"><GoodsList></GoodsList></div>
        <div class="goodsList"><GoodsList></GoodsList></div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Swiper from '@/components/Swiper.vue';
import GoodsSwiper from '@/components/GoodsSwiper.vue';
import GoodsTitle from '@/components/GoodsTitle.vue';
import GoodsList from '@/components/GoodsList.vue';

export default {
  name: 'home',
  components: {
    Swiper,
    GoodsSwiper,
    GoodsTitle,
    GoodsList,
  }
}
</script>
<style scoped>
  .swiperBox{
    width: 100%;
  }
  .goodsBox{
    margin-top: 20px;
  }
</style>